<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-left" color="#000" size="36upx"></u-icon>
			</view>
			<view class="nav-title">银行卡</view>
			<view class="nav-right"></view>
		</view>

		<!-- 银行卡统计头部 -->
		<view class="header-box">
			<view class="header-box-content">
				<view class="header-section">
					<view class="card-count">
						<view class="count-number">3</view>
						<view class="count-text">张银行卡</view>
					</view>
					<view class="monthly-expense" @click="toggleExpenseVisibility">
						<text class="expense-text">本月累计支出</text>
						<text class="expense-amount">****</text>
						<view class="eye-icon">
							<image src="/static/icon/open-eye.png" v-if="showExpense"
								style="transform: translateY(2upx); width: 32upx; height: 24upx;"></image>
							<image src="/static/icon/close-eye.png" v-else
								style="transform: translateY(10upx); width: 36upx; height: 36upx;"></image>
						</view>
					</view>
				</view>

				<!-- 银行卡列表 -->
				<view class="card-list">
					<!-- 第一张卡 - 红色渐变 -->
					<view class="bank-card red-card">
						<view class="card-content">
							<view class="card-number">储蓄卡 8888</view>
							<view class="card-actions">
								<view class="action-item" @click="transferMoney(0)">
									<text class="action-text">转入</text>
								</view>
								<view class="action-item" @click="checkCardNumber(0)">
									<text class="action-text">查卡号</text>
								</view>
								<view class="action-item" @click="checkBill(0)">
									<text class="action-text">查账单</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 第二张卡 - 灰色 -->
					<view class="bank-card gray-card">
						<view class="card-content">
							<view class="card-number">储蓄卡 8888</view>
							<view class="card-actions">
								<view class="action-item" @click="transferMoney(1)">
									<text class="action-text">转入</text>
								</view>
								<view class="action-item" @click="checkCardNumber(1)">
									<text class="action-text">查卡号</text>
								</view>
								<view class="action-item" @click="checkBill(1)">
									<text class="action-text">查账单</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 第三张卡 - 灰色 -->
					<view class="bank-card gray-card">
						<view class="card-content">
							<view class="card-number">储蓄卡 8888</view>
							<view class="card-actions">
								<view class="action-item" @click="transferMoney(2)">
									<text class="action-text">转入</text>
								</view>
								<view class="action-item" @click="checkCardNumber(2)">
									<text class="action-text">查卡号</text>
								</view>
								<view class="action-item" @click="checkBill(2)">
									<text class="action-text">查账单</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加卡片选项 -->
		<view class="add-card-section">
			<view class="add-option" @click="addCardByInput">
				<view class="add-icon">
					<image src="/static/icon/add-card.png"></image>
				</view>
				<text class="add-text">输入卡号添加</text>
			</view>
			<view class="add-option" @click="addCardByPhoto">
				<view class="add-icon">
					<image src="/static/icon/camara-add.png"></image>
				</view>
				<text class="add-text">拍照添加</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cardList: [
				{
					id: 1,
					number: '8888',
					type: '储蓄卡',
					bank: '招商银行',
					isDefault: true
				},
				{
					id: 2,
					number: '8888',
					type: '储蓄卡',
					bank: '建设银行',
					isDefault: false
				},
				{
					id: 3,
					number: '8888',
					type: '储蓄卡',
					bank: '工商银行',
					isDefault: false
				}
			],
			showExpense: false
		};
	},
	computed: {
		cardCount() {
			return this.cardList.length;
		}
	},
	methods: {
		// 返回
		goBack() {
			uni.navigateBack();
		},

		// 转入操作
		transferMoney(index) {
			const card = this.cardList[index];
			this.$api.msg(`转入到${card.bank}${card.type}`);
		},

		// 查看卡号
		checkCardNumber(index) {
			const card = this.cardList[index];
			uni.showModal({
				title: '卡号信息',
				content: `${card.bank}${card.type}\n卡号：**** **** **** ${card.number}`,
				showCancel: false
			});
		},

		// 查看账单
		checkBill(index) {
			const card = this.cardList[index];
			this.$api.msg(`查看${card.bank}账单`);
		},

		// 输入卡号添加
		addCardByInput() {
			uni.showModal({
				title: '添加银行卡',
				editable: true,
				placeholderText: '请输入银行卡号',
				success: (res) => {
					if (res.confirm && res.content) {
						this.addNewCard(res.content);
					}
				}
			});
		},

		// 拍照添加
		addCardByPhoto() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['camera'],
				success: (res) => {
					this.$api.msg('正在识别银行卡信息...');
					// 这里可以调用OCR识别接口
					setTimeout(() => {
						this.$api.msg('银行卡识别功能待实现');
					}, 1500);
				}
			});
		},

		// 添加新卡片
		addNewCard(cardNumber) {
			const newCard = {
				id: Date.now(),
				number: cardNumber.slice(-4),
				type: '储蓄卡',
				bank: '新银行',
				isDefault: false
			};
			this.cardList.push(newCard);
			this.$api.msg('银行卡添加成功');
		},

		// 切换支出显示
		toggleExpenseVisibility() {
			this.showExpense = !this.showExpense;
		}
	}
}
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}

.container {
	min-height: 100vh;
	background: #f5f5f5;
}

// 导航栏
.navbar {
	height: 88upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40upx;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding-top: var(--status-bar-height);
	height: calc(88upx + var(--status-bar-height));

	.nav-left {
		width: 80upx;

		.back-icon {
			font-size: 48upx;
			color: #000;
			font-weight: 300;
		}
	}

	.nav-title {
		font-size: 36upx;
		font-weight: 400;
		color: #000;
	}

	.nav-right {
		width: 80upx;
	}
}

.header-box {
	margin-top: calc(88upx + var(--status-bar-height) + 30upx);
	padding: 0 30upx;
}

// 银行卡统计头部
.header-box-content {
	background: #fff;
	border-radius: 16upx;
	padding-bottom: 10upx;

	.header-section {
		padding: 30upx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		border-bottom: 2upx dotted #999;

		.card-count {
			display: flex;
			align-items: flex-end;
			gap: 6upx;

			.count-number {
				font-size: 80upx;
				font-weight: bold;
				color: #000;
				line-height: 0.9;
			}

			.count-text {
				font-size: 28upx;
				color: #333;
			}
		}

		.monthly-expense {
			display: flex;
			align-items: flex-end;
			gap: 8upx;

			.expense-text {
				color: #333;
			}

			.expense-amount {
				color: #000;
				font-weight: 500;
			}

			.eye-icon {
				margin-left: 10upx;
			}
		}
	}
}

// 银行卡列表
.card-list {
	padding: 30upx 30upx 0;

	.bank-card {
		margin-bottom: 24upx;
		border-radius: 30upx;
		height: 280upx;
		position: relative;
		overflow: hidden;
		box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.1);

		&.red-card {
			background: linear-gradient(135deg, #E85A4F 0%, #F4A261 50%, #F4A261 100%);
			position: relative;

			// 添加山峰形状的装饰
			&::before {
				content: '';
				position: absolute;
				bottom: 140upx;
				left: 0;
				right: 0;
				height: 100upx;
				background: linear-gradient(135deg, rgba(200, 60, 50, 0.4) 0%, rgba(160, 40, 30, 0.6) 100%);
				clip-path: polygon(0% 100%, 12% 70%, 25% 85%, 38% 50%, 52% 75%, 68% 45%, 82% 65%, 95% 40%, 100% 100%);
				pointer-events: none;
			}

			// 添加第二层山峰
			&::after {
				content: '';
				position: absolute;
				bottom: 100upx;
				left: 0;
				right: 0;
				height: 70upx;
				background: linear-gradient(135deg, rgba(140, 30, 20, 0.5) 0%, rgba(100, 15, 10, 0.7) 100%);
				clip-path: polygon(0% 100%, 18% 75%, 32% 90%, 48% 55%, 62% 80%, 78% 35%, 92% 70%, 100% 100%);
				pointer-events: none;
			}
		}

		&.gray-card {
			background: linear-gradient(135deg, #D3D3D3 0%, #B8B8B8 100%);

			.card-actions {
				background: rgba(0, 0, 0, 0.15) !important;
			}
		}

		.card-content {
			position: relative;
			height: 100%;
			padding: 24upx 30upx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			z-index: 1;

			.card-number {
				color: #fff;
				font-size: 30upx;
				font-weight: 400;
				align-self: flex-end;
				margin-top: 20upx;
				text-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.2);
			}

			.card-actions {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: rgba(0, 0, 0, 0.25);
				border-radius: 0 0 20upx 20upx;
				padding: 18upx 30upx;
				margin: 0 -30upx -24upx;
				position: relative;
				z-index: 2;

				.action-item {
					flex: 1;
					text-align: center;
					padding: 6upx 0;

					.action-text {
						color: #fff;
						font-weight: 400;
					}
				}
			}
		}
	}
}

// 添加卡片选项
.add-card-section {
	background: #d4d4d4;
	margin: 50upx 30upx 0;
	border-radius: 20upx;
	padding: 50upx 30upx;
	display: flex;
	justify-content: space-around;
	align-items: center;

	.add-option {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10upx;

		.add-icon {
			width: 76upx;
			height: 76upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.add-text {
			font-size: 24upx;
			color: #333;
			font-weight: 400;
		}
	}
}
</style>